<template>
  <div class="">
    <videoPlayer
      :options="state.options"
      @capture="state.funCapture"
      @output="state.funOutput"
      @segmentOk="state.funcSegmentOk"
      @pushIntoBill="state.funPushIntoBill"
    />
    <div style="margin: 0 auto; width: 400px" v-show="state.captureInfo.base64">
      标记点信息<br />

      <img :src="state.captureInfo.base64" width="400" /><br />
      <div v-if="state.captureInfo.type == 'capture'">
        标记点：{{ state.captureInfo.currentPer }}
      </div>
      <div v-if="state.captureInfo.type == 'segment'">
        标记入点：{{ state.captureInfo.inPosition }} - 标记出点：{{
          state.captureInfo.outPosition
        }}
      </div>
    </div>
    <div
      class="mg-top-20"
      style="margin: 0 auto; width: 600px; height: 350px"
      v-if="state.captureInfo.type == 'output'"
    >
      <video
        :src="state.captureInfo.videoUrl"
        style="width: 100%; height: 100%"
        controls
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { getCurrentInstance, reactive } from "vue";
import videoPlayer from "./extend/videoPlayer.vue";
import { getFomatTime } from "@/utils/utils";
import request from "@/http/request";
const { proxy }: any = getCurrentInstance();

const state: any = reactive({
  options: {
    autoplay: true,
    capture: true,
    editBtns: ["current", "duration", "space"],
    mode: "edit",
    poster: "",
    fps: 25,
    src:
      "http://vjs.zencdn.net/v/oceans.mp4",
  },
  captureInfo: {},
  funCapture: (record: any = {}) => {
    record.currentPer = getFomatTime(record.pos, state.options.fps);
    record.type = "capture";
    state.captureInfo = record;
  },
  funOutput: (record: any = {}) => {
    let duration: any =
      getFomatTime(record.in, state.options.fps) +
      " - " +
      getFomatTime(record.out, state.options.fps);
    let params: any = {
      type: "output",
      id: "",
      version: "",
      rename: "文件名.mp4 " + duration,
      startTime: record.in,
      stopTime: record.out,
      duration,
    };
    request.files.postFfmpeg(params).then((res: any) => {
      params.videoUrl = res.url;
      state.captureInfo = params;
    });
  },
  funcSegmentOk: (record: any = {}) => {
    record.type = "segment";
    record.inPosition = getFomatTime(record.inPosition, state.options.fps);
    record.outPosition = getFomatTime(record.outPosition, state.options.fps);
    state.captureInfo = record;
  },
  funPushIntoBill: (record: any = {}) => {
    record.type = "pushIntoBill";
    console.info(record);
  },
});
</script>
